<template>
  <view class="content">
    <view class="header">
      <view class="title">我的电影票</view>
      <view class="tab-box">
        <view
          class="tab-item"
          :class="current === 0 ? 'active-item' : ''"
          @click="change(0)"
          >待使用</view
        >
        <view
          class="tab-item"
          :class="current === 1 ? 'active-item' : ''"
          @click="change(1)"
          >所有订单</view
        >
      </view>
    </view>
    <view>
      <ticket v-if="current === 0"></ticket>
      <order v-else></order>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import Ticket from '../components/ticket/index.vue';
import Order from '../components/orders/index.vue';

export default defineComponent({
  components: {
    Ticket,
    Order,
  },
  setup() {
    const current = ref(0);

    return {
      current,
    };
  },
  methods: {
    change(index: number) {
      this.current = index;
    },
  },
});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 300rpx;
  background-image: url('@/static/images/chooseSeat.png');
  background-size: cover;
  padding: 0rpx 48rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .title {
    color: white;
    font-size: 38rpx;
    font-weight: 700;
  }

  .tab-box {
    width: 100%;
    height: 88rpx;
    background-color: rgba(255, 255, 255, 0.125);
    padding: 17rpx 15rpx;
    display: flex;
    border-radius: 16rpx;
    margin-top: 42rpx;
    margin-bottom: 32rpx;

    .tab-item {
      height: 54rpx;
      flex-grow: 1;
      text-align: center;
      line-height: 54rpx;
      color: #fff;
      font-weight: 500;
      border-radius: 20rpx;
    }

    .active-item {
      background-color: #fff;
      color: #000;
    }
  }
}
</style>
